<script lang="ts" setup>

</script>

<template>
  <div>
    <div class="loader-container">
      <div class="loader"></div>
      <p class="text-center mt-2">数据正在拼命加载中...</p>
    </div>
  </div>


</template>

<style scoped>
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.loader {
  border-top-color: #ff6b08;
  border-left-color: #ff6b08;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-top: 4px solid rgba(15, 80, 217, 0.2);
  border-right: 4px solid rgba(29, 67, 216, 0.2);
  border-bottom: 4px solid rgba(255, 107, 8, 0.2);
  border-left: 4px solid #2570e2;
  animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.text-center {
  margin-top: 1rem;
}
</style>